<template>
  <div class="midden-center">
    <div class="title">
      <span>总交易金额</span>
      <span>{{ totalAmountData.total_amount }}</span>
    </div>
    <div id="midden-center"></div>
  </div>
</template>

<script>
export default {
  props: {
    totalAmountData: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    totalAmountData(newValue) {
      this.$props.totalAmountData = newValue;
      this.mapEchart();
    },
  },
  mounted() {
    this.mapEchart();
  },
  methods: {
    mapEchart() {
      var chartDom = document.getElementById("midden-center");
      var myChart = this.$echarts.init(chartDom);
      var option;

      const dayData = this.$props.totalAmountData.total_amount_list.map(
        (item) => {
          return item.day;
        }
      );

      const amountOne = this.$props.totalAmountData.total_amount_list.map(
        (item) => {
          return item.amount1;
        }
      );

      const amountTwo = this.$props.totalAmountData.total_amount_list.map(
        (item) => {
          return item.amount2;
        }
      );

      option = {
        //title: {
        //  text: "单位/百万",
        //  left: "18",
        //  top: "8",
        //  textStyle: {
        //    color: "#fff",
        //    fontSize: 16,
        //  },
        //},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          right: "10",
          top: 10,
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
        },
        xAxis: {
          type: "category",
          data: dayData,
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
          },
        },
        series: [
          {
            name: "惠选购物",
            data: amountOne,
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: [8, 8, 0, 0],
              },
            },
          },
          {
            name: "商邦成交",
            data: amountTwo,
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: [8, 8, 0, 0],
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.midden-center {
  width: 986px;
  height: 517px;
  background: #0b2c47;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 18px;
}
#midden-center {
  width: 100%;
  height: 460px;
}
.title {
  font-size: 32px;
  font-family: Adobe Heiti Std;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  margin: 10px 20px 0;
}
</style>
